<script setup>
import {ref, onMounted} from 'vue';
import {useRouter} from 'vue-router';
import {getAllNotices} from "../../api/notice.js";
import {getAllAnimals} from "../../api/animal.js";

const router = useRouter();
const tableData = ref([]);
const name = ref("");
const notices = ref([]);
const active = ref('0');

onMounted(async () => {
    try {
        const resp = await getAllNotices();
        notices.value = resp.data;
    } catch (error) {
        console.error('Error fetching notices:', error);
    }

    try {
        const resp = await getAllAnimals();
        tableData.value = resp.data;
    } catch (error) {
        console.error('Error fetching animals:', error);
    }
});
</script>

<template>
    <div class="main-container">
        <div class="carousel-container">
            <el-carousel height="400px">
                <el-carousel-item>
                    <img src="../../assets/b1.jpg" alt="" style="width: 100%;height: 100%">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="../../assets/b2.jpg" alt="" style="width: 100%;height: 100%">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="../../assets/b3.jpg" alt="" style="width: 100%;height: 100%">
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="announcement-container">
            <div class="announcement-title">公告列表</div>
            <el-collapse v-model="active">
                <el-collapse-item :name="index + ''" v-for="(item, index) in notices" :key="index">
                    <template #title>
                        <span class="collapse-title">{{ item.name }}</span>
                    </template>
                    <div class="collapse-content">{{ item.content }}</div>
                </el-collapse-item>
            </el-collapse>
        </div>

        <div class="stray-pets-container">
            <div class="stray-pets-title">流浪宠物</div>
            <el-card v-for="item in tableData" :key="item.id" class="pet-card">
                <div class="pet-card-content">
                    <div class="pet-image" @click="() => router.push('/homeDetail?id=' + item.id)">
                        <img :src="item.img" alt="" class="pet-image">
                    </div>
                    <div class="pet-info">
                        <div class="pet-details">
                            <span class="pet-nickname">{{ item.nickname }}</span>
                            <span class="pet-sex">{{ item.sex }}</span>
                            <span class="pet-age">{{ item.age }}</span>
                        </div>
                        <div class="pet-description">
                            <div>所属种类：{{ item.type }}</div>
                            <div>活动范围：{{ item.address }}</div>
                            <div>身体状态：{{ item.status }}</div>
                            <div>其他描述：{{ item.information }}</div>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<style scoped>
.main-container {
    padding-bottom: 20px;
}

.carousel-container {
    margin: 10px 0;
}

.carousel {
    height: 400px;
}

.carousel-image {
    width: 100%;
    height: 100%;
}

.announcement-container {
    margin: 10px 0;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
}

.announcement-title {
    padding: 10px 0;
    font-size: 28px;
    color: #67C23A;
}

.collapse-title {
    font-size: 18px;
    color: #666;
}

.collapse-content {
    color: #888;
}

.stray-pets-container {
    margin: 10px 0;
}

.stray-pets-title {
    padding: 20px 10px;
    font-size: 28px;
    background-color: #fff;
    border-radius: 10px;
    color: #3F5EFB;
}

.pet-card {
    margin: 10px 0;
}

.pet-card-content {
    display: flex;
}

.pet-image {
    /*width: 140px;*/
    height: 160px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
}

.pet-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.pet-info {
    padding-left: 50px;
    flex: 1;
}

.pet-details {
    border-bottom: 1px solid #ddd;
    width: 100%;
    padding-bottom: 10px;
    font-size: 24px;
}

.pet-sex, .pet-age {
    margin-left: 20px;
}

.pet-description {
    line-height: 30px;
}
</style>